<!DOCTYPE html>
<html lang="en">
<head th:include="certificateWeb/headFoot :: headerCss"></head>
<!--<link href="/css/web/themes/about.css" rel="stylesheet">-->
<body id="body">
<div th:include="certificateWeb/headFoot :: header"></div>
<style>
    #container{
        height:400px;
        width:100%;
    }
    .amap-icon img{
        width: 25px;
        height: 34px;
    }
    .title{
        color: #333;
        font-size: 15px;
        font-weight: 700;
    }
</style>
<main id="main">
    <section id="about">
        <div class="container">
            <div class="section-header">
                <h2>ABOUT</h2>
            </div>
            <div class="row">
                <div class="col-lg-12 content about_fanwei">
                </div>
            </div>
            <!--营业执照-->
            <div class="row">
                <div class="col-lg-12 content about_card">
                    <div id="div_1"></div>
                </div>
            </div>
            <div id="container"></div>
        </div>
    </section>
</main>
<div th:include="certificateWeb/headFoot :: footer"></div>
</body>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=4b3ab4d6b960343056ee6bb285a5ce5f"></script>
<script type="text/javascript">
    $(function () {
        $.ajax({
            url:'/jzApi/utils/selAboutUs',
            success:function (r) {
                var news = '';
                var longitude='';
                var latitude='';
                r.data.aboutUs.forEach(function (item, index) {
                    if(item.type=='img'){
                         news += '<div class="flex" style="margin: 10px 0;padding-bottom: 20px"><div class="span_2 title">' + item.name + '：</div>';
                        if(item.value.indexOf(";;")!=-1){//多张图片
                           var imgList = item.value.split(";;");
                            for(var i=0;i<imgList.length;i++){
                                news += '<img class="span_1" style="width:355px;margin:0 10px 10px 0" src="' + imgList[i]+ '" />';
                            }
                        }else{
                            news += '<img class="span_1" style="height:80px" src="' + item.value+ '" />';
                        }
                        news += '</div>'
                    }else if(item.type=='longitude'){
                        news +='';
                        longitude=item.value
                    }else if(item.type=='latitude'){
                        news +='';
                        latitude=item.value
                    }else{
                        news += '<div class="flex" style="margin: 10px 0"><span class="span_2 title">' + item.name + '：</span>' +
                            '<span class="span_1">' + item.value+ '</span></div>';
                    }
                });
                mapData(longitude,latitude);
                $("#div_1").html(news)
            }
        })
    });
    function mapData(longitude,latitude) {
        // 创建地图实例
        var map = new AMap.Map("container", {
            zoom: 15,
            center: [longitude,latitude],
            resizeEnable: true
        });
        // 创建一个 Icon
        var startIcon = new AMap.Icon({
            // 图标尺寸
            size: new AMap.Size(25, 34),
            // 图标的取图地址
            image: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png',
            imageSize: new AMap.Size(135, 40),
            imageOffset: new AMap.Pixel(-95, -3)
        });

        // 将 icon 传入 marker
        var startMarker = new AMap.Marker({
            position: new AMap.LngLat(longitude,latitude),
            icon: startIcon,
            offset: new AMap.Pixel(-13, -30)
        });
        // 将 markers 添加到地图
        map.add([startMarker]);
    }
</script>
</html>